// 这里存储拖拽后的json数据
import { defineStore } from "pinia";
import { ref } from "vue";

export const useFormJsonStore = defineStore("form-json", () => {

    const currentJson = ref({});

    // 需要渲染的组件配置
    const formJson = ref([
        {
            id: "1235465767",
            type: "XForm",
            selected: true,
            label: "表单",
            submitText: "确定",
            submitSize: "tiny",
            class: "",
            props: {
                "label-width": "100px",
            },
            body: [
                {
                    id: "123dfsafrer767",
                    class: "w-64",
                    tailwindcss:[],
                    style:"",
                    type: 'XInput', // 组件类型
                    label: "输入框", // 标签
                    name: "XInput", // 字段名
                    props: { // 组件属性，参考naive-ui文档
                        placeholder: '请输入', // 占位符
                        size: "small",
                        "label-placement": "left",
                    }
                },
                {
                    id: "aghjjhgs",
                    type: 'XSelect', // 组件类型
                    label: '下拉框', // 标签
                    name: "XSelect", // 字段名
                    tailwindcss:[],
                    props: { // 组件属性，参考naive-ui文档
                        placeholder: '请选择', // 占位符
                        "label-placement": "left",
                        size: "small",
                        options: [
                            {
                                label: "选项一",
                                value: 1,
                            }
                        ]
                    }
                },
                {
                    id: "ytiayufidou",
                    type: 'XCascader', // 组件类型
                    label: '联动下拉框', // 标签
                    class: "w-48",
                    tailwindcss:[],
                    name: "XCascader", // 字段名
                    props: { // 组件属性，参考naive-ui文档
                        placeholder: '请选择', // 占位符
                        "label-placement": "left",
                        size: "small",
                        options: [
                            {
                                label: "选项一",
                                value: 1,
                            }
                        ]
                    }
                },
                {
                    id: "aghjjfhgs",
                    type: 'XAutoComplete', // 组件类型
                    label: '自动完成', // 标签
                    class: "w-48",
                    tailwindcss:[],
                    name: "XAutoComplete", // 字段名
                    props: { // 组件属性，参考naive-ui文档
                        placeholder: '请选择', // 占位符
                        size: "small",
                        "label-placement": "left",
                        options: [
                            {
                                label: "选项一",
                                value: 1,
                            }
                        ]
                    }
                }
            ]
        }
    ])

    // 获取当前表单配置
    const getFormJson = () => {
        return formJson.value;
    }

    const setFormJson = (parentId, child) => {
        appendToBodyById(parentId, child, formJson.value)
    }

    const appendToBodyById = (id, object, dataArray) => {

        if (id == 0) {
            // 说明是根节点，直接追加
            formJson.value.push(object);
            return
        }

        for (let i = 0; i < dataArray.length; i++) {
            const currentItem = dataArray[i];
            if (currentItem.id === id) {
                if (!currentItem.body) {
                    currentItem.body = [];
                }
                currentItem.body.push(object);
                return true; // 说明找到并追加成功
            } else if (currentItem.body && Array.isArray(currentItem.body)) {
                // 如果当前项有 body 并且 body 是一个数组，则递归调用这个方法
                const found = appendToBodyById(id, object, currentItem.body);
                if (found) {
                    return true; // 如果在 body 中找到了对应的 id，则直接返回
                }
            }
        }
        return false; // 没有找到对应的 id
    }

    const getFormJsonById = (id, dataArray) => {
        for (let i = 0; i < dataArray.length; i++) {
            const currentItem = dataArray[i];
            if (currentItem.id === id) {
                currentItem.selected = true
                currentJson.value = currentItem
            } else {
                currentItem.selected = false
            }

            if (currentItem.body && Array.isArray(currentItem.body)) {
                // 如果当前项有 body 并且 body 是一个数组，则递归调用这个方法
                getFormJsonById(id, currentItem.body);
            }
        }
    }

    const setCurrentFormJson = (id) => {
        getFormJsonById(id, formJson.value)
        console.log(currentJson.value)
    }

    const getCurrentFormJson = () => {
        return currentJson;
    }

    return {
        formJson,
        getFormJson,
        setFormJson,
        setCurrentFormJson,
        getCurrentFormJson,
    };
});
